<!DOCTYPE HTML>

<!--suppress HtmlUnknownTag -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<div th:replace="site/head::head(${commons.site_title()},${commons.google_site_verification()}, ${commons.baidu_site_verification()})"></div>

<body>
<!-- header -->
<div th:replace="site/header::header"></div>
<!-- header -->
<!-- main -->
<main class="container" role="main-inner-wrapper">

    <div class="row">
        <!-- Left -->
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 ">
            <article class="blog-header" role="pge-title-content">
                <header>
                    <h2><span>Hi!</span> Welcome to my blog site</h2>
                </header>
                <p>Some technical blogs and life logs about Java.</p>
            </article>

            <!--suppress XmlDuplicatedId -->
            <ul class="grid-lod effect-2" id="grid">
                <th:block th:each="article, articleStat : ${articles.list}">
                    <th:block th:if="${articleStat.index % 2 != 0}">
                        <li>
                            <section class="blog-content">
                                <a th:href="${commons.blogPermalink(article.id, query.content)}">
                                    <figure>
                                        <div class="post-date">
                                            <th:block th:utext="${commons.fmtdate_en(article.created)}"/>
                                        </div>
                                        <img alt="" class="img-responsive" th:src="${commons.showThumb(article.content) ?: commons.randomBlogPic(1322)}"/>
                                    </figure>
                                </a>

                                <article>
                                    <th:block th:utext="${article.title}"/>
                                </article>
                            </section>
                        </li>
                    </th:block>
                </th:block>
            </ul>
        </div>

        <!-- right -->
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
            <!--suppress XmlDuplicatedId -->
            <ul class="grid-lod effect-2" id="grid">
                <th:block th:each="article, articleStat : ${articles.list}">
                    <th:block th:if="${articleStat.index % 2 == 0}">
                        <li>
                            <section class="blog-content">
                                <a th:href="${commons.blogPermalink(article.id, query.content)}">
                                    <figure>
                                        <div class="post-date">
                                            <th:block th:utext="${commons.fmtdate_en(article.created)}"/>
                                        </div>
                                        <img alt="" class="img-responsive" th:src="${commons.showThumb(article.content) ?: commons.randomBlogPic(1221)}"/>
                                    </figure>
                                </a>
                                <article>
                                    <th:block th:utext="${article.title}"/>
                                </article>
                            </section>
                        </li>
                    </th:block>
                </th:block>
            </ul>
        </div>
    </div>
    <div class="lists-navigator clearfix">
        <div th:replace="comm/macros::pageNav(${articles}, '←', '→', '/blog/page', ${query.content == null} ? '' : ${query.content})"></div>
    </div>
</main>
<!-- main -->
<!-- footer -->
<div th:replace="site/footer::footer(${commons.site_title()},${commons.site_record()},${commons.site_url()})"></div>
</body>
</html>